<template>
  <div class="multiple-choice">
    <!-- 题干 -->
    <div class="stem">
      <span class="order">{{ topic.order || "" }}. &nbsp;</span>
      <span class="title">
        <span style="color: #a8a8b3">(多选题)</span>
        <!-- <edit-block v-model="topic.title"></edit-block> -->
        <!-- <span data-block-type="title" @contextmenu="handleContextMenu">{{
          topic.title
        }}</span> -->
        <edit-block :content="topic.title" :blockType="`title`"></edit-block>
      </span>
    </div>
    <!-- 选项 -->
    <div class="opts">
      <ol type="A">
        <li
          class="option"
          :class="topic.corrects.indexOf(idx) == -1 ? '' : 'selected'"
          @click="handleClick(idx)"
          v-for="(opt, idx) in topic.opts"
          :key="idx"
        >
          <!-- {{ opt }} -->
          <edit-block
            :content="opt"
            :blockType="`opt`"
            :currentOptIndex="idx"
          ></edit-block>
        </li>
      </ol>
    </div>
    <!-- 添加选项 -->
    <el-button
      @click="addOpt"
      size="small"
      type="primary"
      icon="el-icon-plus"
      circle
    ></el-button>

    <!-- 解析 -->
    <explain-edit-block :explain="topic.explain"></explain-edit-block>
  </div>
</template>

<script>
/**
 * 1. 选择正确答案 √
 * 2. 添加选项 √
 */
import EditBlock from "@/components/EditBlock.vue";
import ExplainEditBlock from "../ExplainEditBlock.vue";
import { mixin } from "@/mixin";

export default {
  name: "MultipleChoice",
  components: { EditBlock, ExplainEditBlock },
  mixins: [mixin],
  data() {
    return {
      topicTemplate: {
        order: 1,
        title: "1+1=?",
        opts: ["1", "2", "3"],
        explain: "1+1=2",
        corrects: [],
      },
      questionType: "mc",
    };
  },
  methods: {
    handleClick(index) {
      this.$store.commit("topicAbout/SET_CORRECT", index);
    },
    addOpt() {
      // console.log("addOpt")
      // this.topic.opts.push("示例选项");
      this.$store.commit("topicAbout/ADD_OPT");
    },
  },
};
</script>

<style lang='less' scoped>
.multiple-choice {
  width: 100%;
  padding: 0px 10px;
}
</style>